// Navs
//
// Styleguide 9.

// Choose-Your-Own-Adventure Nav
//
// Navigation for a landing page of parent settings page. Displays a bunch of different navigation options that
// will likely lead to other settings pages.
//
// PHP rendering: Render using the `nav-adventure` of the nav module.
//
// Markup:
// <div class="nav nav-adventure">
//   <div class="nav-item">
//     <a class="nav-link" href="#">
//       <div class="nav-item-icon">
//         <svg class="icon icon-svg-plugin" viewBox="0 0 17 17">
//           <use xlink:href="#plugin"></use>
//         </svg>
//       </div>
//       <div class="nav-item-content">
//         <div class="nav-item-title">Here's the nav title</div>
//         <div class="nav-item-description">
//           Here's some expanatory text about where you're headed if you select this item.
//         </div>
//       </div>
//       <div class="nav-item-arrow">
//         <svg class="icon icon-svg-chevron-right" viewBox="0 0 17 17">
//           <use xlink:href="#chevron-right"></use>
//         </svg>
//       </div>
//     </a>
//   </div>
// </div>
//
// Styleguide 9.1.

.nav-adventure {
    @include has-top-border;

    .nav-item {
        display: block;
        margin-left: -$padding-row;
        margin-right: -$padding-row;
        border-bottom: $border-width solid $border-color;

        &:first-child {
            border-top: $border-width solid $border-color;
        }
    }

    .nav-item-title {
        line-height: 1;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .nav-item-description {
        margin-bottom: -5px;
    }

    .nav-link {
        position: relative;
        display: flex;
        justify-items: flex-start;
        align-items: center;
        padding: 3px $padding-row;
        line-height: 20px;
        color: $grey-dark;
        transition: background-color 0.1s;

        > * {
            z-index: 1;
        }

        svg {
            display: block;
            height: 24px;
        }

        &:hover {
            &::before {
                width: 100%;
            }

            background-color: #f9fdfe;
        }
    }

    .nav-item-icon {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        border: $border-width solid $border-color;
        border-radius: $border-radius;
        margin-right: $spacer;
    }

    .nav-item-arrow {
        margin-left: auto;
    }
}

// Stats Nav
//
// Navigation for a landing page of parent settings page. Displays a bunch of different navigation options that
// will likely leading to other settings pages.
//
// Markup:
// <ul class="nav nav-stats">
//   <li class="nav-stats-item nav-stats-link nav-stats-pageviews active">
//     <div class="nav-stats-value">33,250</div>
//     <div class="nav-stats-title">Page Views</div>
//   </li>
//   <li class="nav-stats-item nav-stats-link nav-stats-discussions">
//     <div class="nav-stats-value">360</div>
//     <div class="nav-stats-title">Discussions</div>
//   </li>
// </ul>
//
// Styleguide 9.2.

.nav-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    padding: ($spacer * 0.5) $spacer 0;
    color: rgba(25, 25, 25, 0.2);
}

.nav-stats-link {
    > * {
        cursor: pointer;
    }
}

.nav-stats-title {
    font-weight: 400;
    padding: $spacer * 0.5 0 $spacer * 0.25;
    text-transform: uppercase;
    font-size: $font-size-sm;
}

.nav-stats-value {
    font-weight: 300;
    font-size: 40px;
}

// Panel navigation
//
// The dashboard panel navigation.
//
// No styleguide reference.

.nav-inline {
    font-size: 0;

    .nav-item {
        display: inline-block;
    }

    .nav-item + .nav-item,
    .nav-link + .nav-link {
        margin-left: 16px;
    }
}

.panel-nav {
    a {
        color: $grey-dark;
    }

    .title {
        display: block;
        margin-bottom: $spacer;
    }

    .badge {
        font-size: $font-size-xs;
    }

    .globals-sign-out {
        display: none;

        @include media-breakpoint-down(md) {
            display: block;
            margin-top: $spacer * 2;
        }
    }

    .nav-pill {
        color: $body-bg;
        background: transparentize($grey, 0.4);

        //color: #1892d8;
        //background: rgba(255, 255, 255, .75);
        display: inline-block;
        ///* text-transform: uppercase; */
        font-size: 8px;
        line-height: 1;
        padding: 2px 4px;
        border-radius: 3px;
        vertical-align: middle;
    }

    .nav-link {
        &.active {
            border-radius: $nav-pills-panel-border-radius;

            &,
            &:hover {
                color: $grey-dark;
                background-color: $nav-pills-link-hover-bg;

                .nav-pill {
                    color: $nav-pills-link-hover-bg;
                    background-color: transparentize($white, 0.3);
                }
            }
        }

        &:hover,
        &.hover {
            color: $brand-new-primary-active;
        }
    }

    .nav-stacked {
        .nav-item + .nav-item {
            margin-top: 0;
        }
    }
}

.nav-heading {
    margin-top: 6px;
    margin-bottom: 6px;

    a {
        display: block;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        position: relative;
        line-height: 1.25;

        &::before {
            @include caret;
            position: absolute;
            transform: translate(0, -50%) rotate(0deg);
            margin-left: -12px;
            margin-right: 8px;
            top: 50%;
            left: 0;
            transition: all 0.1s ease-out;
        }

        &.collapsed::before {
            transform: translate(0, -50%) rotate(-90deg);
        }
    }
}

.nav-link {
    &,
    &.active,
    &:active,
    &.hover,
    &:hover {
        cursor: pointer;
    }
}
